<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { pageMyOpt } from "@/api/complaint";
import type { ComplaintReq, Complaint } from "@/api/complaint/type";
import type { BaseResponse } from "@/api/base";
import { optDisAgree, optAgree } from './common'
import { toast } from "@/utils/common";

const props = defineProps({
  type: {
    type: Number,
    default: 0
  }
})

const pageReq = ref<ComplaintReq>({
  pageSize: 10,
  pageNum: 1,
  status: 2,
  type: props.type,
})
const complaintList = ref<Complaint[]>([])
const moreStatus = ref<boolean>(true)
const loadStatus = ref<string>('loadmore')

const loadPageMyOpt = async () => {
  loadStatus.value = 'loading'
  try {
    const res: BaseResponse = await pageMyOpt(pageReq.value)
    if (pageReq.value.pageNum == 1 && res.data.records.length < pageReq.value.pageSize) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      complaintList.value = complaintList.value.concat(res.data.records)
      pageReq.value.total = res.data.total
      return
    }
    if (!res.data || res.data.records.length == 0 || res.data.total < complaintList.value.length) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      return
    }
    if (pageReq.value.pageNum === 1) {
      complaintList.value = res.data.records || []
    } else {
      complaintList.value = complaintList.value.concat(res.data.records)
    }
    loadStatus.value = 'loadmore'
    pageReq.value.pageNum++
  } catch (error) {
    loadStatus.value = 'nomore'
    moreStatus.value = false
    toast(error.tips)
  }
}

onLoad(async () => {
  await loadPageMyOpt()
})

onReachBottom(() => {
  // 如果依然还有数据，就触发
  if (moreStatus.value == true) {
    loadStatus.value = 'loading'
    setTimeout(() => {
      loadPageMyOpt()
      loadStatus.value = 'loadmore'
    }, 500)
  }
})

const getSize = computed(() => {
  const v = uni.upx2px(750) - 40
  const w = v / 3
  return {
    width: w + 'px',
    height: w + 'px'
  }
})

const reload = async () => {
  // 重置分页参数
  pageReq.value.pageNum = 1
  // 清空当前列表
  complaintList.value = []
  // 重新加载数据
  await loadPageMyOpt()
}

const jumpToDetail = (item: Complaint) => {
  uni.navigateTo({
    url: `/pages/complaint/detail?id=${item.id}`
  })
}
</script>

<template>
  <view class="complaint-agree">
    <view class="complaint-list">
      <view class="complaint-item" v-for="(item, index) in complaintList" :key="index">
        <user-info class="complaint-item-userinfo" :data="item">
        </user-info>
        <view class="complaint-item-content" @click="jumpToDetail(item)">
          <kevy-ellipsis :textId="index" :content="item.content" :rows="3" expand-text="展开" collapse-text="收起"
            :key="index" :font-size="28"></kevy-ellipsis>
        </view>
        <uv-grid v-show="item.pic" class="complaint-item-pic" :border="false">
          <uv-grid-item v-for="(p, index) in item.pic?.split(',')" :key="index" style="margin-bottom: 10rpx;">
            <my-image :customStyle="getSize" :index="index" :src="p"></my-image>
          </uv-grid-item>
        </uv-grid>
        <view class="complaint-item-opt">
          <view class="complaint-item-opt-item" @click="optAgree(item)">
            <uv-text class="complaint-item-opt-item-text" :color="item.agree ? '#1e80ff' : '#999'" size="28rpx"
              lineHeight="50rpx" :iconStyle="{ 'font-size': '40rpx', 'color': item.agree ? '#1e80ff' : '#999' }"
              :prefixIcon="item.agree ? 'thumb-up-fill' : 'thumb-up'"
              :text="item.agreeCount ? item.agreeCount : '点赞'"></uv-text>
          </view>
          <view class="complaint-item-opt-item" @click="jumpToDetail(item)">
            <uv-text class="complaint-item-opt-item-text" :color="item.comment ? '#1e80ff' : '#999'" size="28rpx"
              lineHeight="50rpx" :iconStyle="{ 'font-size': '40rpx', 'color': item.comment ? '#1e80ff' : '#999' }"
              :prefixIcon="item.comment ? 'chat-fill' : 'chat'"
              :text="item.commentCount ? item.commentCount : '评论'"></uv-text>
          </view>
          <view class="complaint-item-opt-item" @click="optDisAgree(item)">
            <uv-text class="complaint-item-opt-item-text" :color="item.reject ? '#1e80ff' : '#999'" size="28rpx"
              lineHeight="50rpx" :iconStyle="{ 'font-size': '40rpx', 'color': item.reject ? '#1e80ff' : '#999' }"
              :prefixIcon="item.reject ? 'thumb-down-fill' : 'thumb-down'"
              :text="item.rejectCount ? item.rejectCount : '点踩'"></uv-text>
          </view>
        </view>
      </view>
    </view>
    <view style="background-color: #fff;padding: 10px 0;">
      <uv-load-more style="margin: 0;" bgColor="#fff" :status="loadStatus" @loadmore="loadPageMyOpt"></uv-load-more>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.complaint-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .complaint-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    border-bottom: 1px solid #f1f1f1;

    .complaint-item-userinfo {
      padding: 0;
      margin-bottom: 10rpx;
    }

    .complaint-item-content {
      margin-bottom: 10rpx;
    }

    .complaint-item-pic {
      margin-bottom: 20rpx;
    }

    .complaint-item-opt {
      display: flex;
      padding: 0 30rpx;
      height: 50rpx;
      justify-content: space-between;

      .complaint-item-opt-item {
        width: 15%;
        display: flex;
        align-items: center;
      }
    }
  }
}

.complaint-add {
  width: 100rpx;
  height: 100rpx;
  // 渐变
  background: linear-gradient(to top, #1e80ff, #409eff);
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
  border-radius: 50%;

  .complaint-add-icon {
    justify-content: center;
    display: flex;
    align-items: center;

    ::v-deep .uv-icon__icon {
      line-height: 100rpx !important;
    }
  }
}
</style>
